@import "common/functions.scss";
$fs: pxToRem(32px) pxToRem(26px) pxToRem(24px) pxToRem(36px) pxToRem(22px) pxToRem(30px) pxToRem(48px);
%fb{font-weight: bold;}
$red: #B22222;
$cfff: #ffffff;
$org:#EC6941;
body{
	background: #EEEEEE;
	margin-bottom: pxToRem(140px); 
}
.detail_head{
	background: $cfff;
	margin-bottom: pxToRem(20px);
	.goodport{
		position: relative;
		width: pxToRem(750px);
		overflow: hidden;
		margin-bottom: pxToRem(30px);
		img{
			width: 100%;
		}
		.num_pagination{
			width: pxToRem(80px);
			height: pxToRem(80px);
			line-height: pxToRem(80px);
			text-align: center;
			color: $cfff;
			background: #CCCCCC;
			border-radius: 50%;
			font-size: nth($fs,3);
			position: absolute;
			bottom: .5rem;
			right: pxToRem(30px);
			z-index: 1;
		}
		.pagination-current{
			font-size: nth($fs,4);
		}
	}
	.title{
		font-size: nth($fs,1);
		@extend %fb;
		margin-bottom: pxToRem(20px);
		padding: 0 pxToRem(30px);
	}
	.title_explain{
		font-size: nth($fs,2);
		color: #999;
		padding: 0 pxToRem(30px);
	}
	.price{
		padding: pxToRem(20px) pxToRem(30px) 0;
		line-height: 0;
		.point{
			font-size: nth($fs,3);
			margin-right: pxToRem(20px);
			.point_num{
				font-size: nth($fs,4);
				@extend %fb;
				color: #e51d32;
			}
		}
		.market{
			color: #666;
			font-size: nth($fs,3);
			margin-right: pxToRem(20px);
		}
		.market_num{
			text-decoration: line-through;
		}
		.free_shipping{
			color: #EC6A41;
			border: 1px solid #ec6941;
			font-size: nth($fs,5);
			width: pxToRem(106px);
			height: pxToRem(34px);
			line-height: pxToRem(34px);
			text-align: center;
			display: inline-block;
			vertical-align: top;
		}		
	}
	.code{
		padding:pxToRem(20px) pxToRem(30px) pxToRem(30px);
		font-size: nth($fs,2);
		color: #999;
		border-bottom: 1px solid #C8C8CB;
		line-height: 1;
	}
	.tip{
		font-size: nth($fs,2);
		padding: pxToRem(30px);
		border-bottom: 1px solid #C8C8CB;
	}
	
// Swiper
	.swiper-pagination-bullet.swiper-pagination-bullet-active{
		background: $red;
	}
	.swiper-container-horizontal>.swiper-pagination{
		bottom: pxToRem(-5px);
	}
	.swiper-pagination-bullet{
		width: pxToRem(12px);
		height: pxToRem(12px);
		background: #999;
		opacity: 1;
	}
}
.sale{
	padding: pxToRem(30px);
	background: $cfff;
	border-top: 1px solid #C8C8CB;
	border-bottom: 1px solid #C8C8CB;
	color: $org;
	font-size: nth($fs,2);
	margin-bottom: pxToRem(20px);
	.icon-sale{
		display: inline-block;
		width: pxToRem(80px);
		height: pxToRem(40px);
		line-height: pxToRem(40px);
		color: $cfff;
		background: $org;
		font-size: nth($fs,3);
		margin-right: pxToRem(20px);
		text-align: center;
		border-radius: 5px;
	}
}
.select_block{
	background: $cfff;
	padding: pxToRem(30px);
	margin-bottom: pxToRem(20px);
	border-top: 1px solid #C8C8CB;
	border-bottom: 1px solid #C8C8CB;
	.h_box{
		position: relative;
	}
	label{
		display: inline-block;
		color: #666;
		font-size: nth($fs,6);
		margin-right: pxToRem(50px);
		vertical-align: top;
		margin-bottom: pxToRem(30px);
		padding-top: pxToRem(8px);
		white-space: nowrap;
	}
	.select_txt{
		padding-top: 0;
	}
	.carName{
		font-size: nth($fs,6);
		max-width: pxToRem(548px);
		margin-bottom: pxToRem(30px);
	}
	.tip_few{
		color: $org;
		font-size: nth($fs,3);
		position: absolute;
		right: 0;
		top: .05rem;
	}

	ul.flex_1{
		line-height: 1;
		max-width: pxToRem(548px);
	}
	.select{
		padding: pxToRem(15px);
		max-width: pxToRem(548px);
		font-size: nth($fs,2);
		display: inline-block;
		border: 1px solid #ccc;
		text-align: center;
		margin: 0 pxToRem(5px) pxToRem(30px) 0;
		vertical-align: top;
		border-radius: 5px;
	}
	.select_active{
		color: $cfff;
		background: $red;
		border: 1px solid $red;
	}
	.lose{
		color: #ccc;
	}
	.btn_gray{
		background: #CCCCCC;
	}
	.btn_number{
		border: 1px solid #CCCCCC;
		border-radius: 5px;
		height: pxToRem(56px);
		line-height: pxToRem(54px);
		background: #F5F5F5;
		.disabled{
			color: #CCCCCC;
		}
		a {
			float: left;
			text-align: center;
			width: pxToRem(66px);			
			font-size: nth($fs,7);
			color: #999999;
			text-decoration: none;
		}
		input {
			width: pxToRem(74px);
			border-left: 1px solid #CCCCCC;
			border-right: 1px solid #CCCCCC;
			text-align: center;
			float: left;
			line-height: pxToRem(54px);
			font-size: nth($fs,4);
			background: #F5F5F5;
		}
	}
}
.btn_buy{
		background: $red;
		color: $cfff;
		display: inline-block;
		width: pxToRem(690px);
		height: pxToRem(80px);
		border-radius: 5px;
		font-size: nth($fs,4);
		text-align: center;
		line-height: pxToRem(80px);
		position: fixed;
		bottom: 0;
		width: 100%;
	}